<template>

  <div class="crumb">
    <div class="crumb-content">
      <router-link to="/">MyStore</router-link>
      <span>></span>
      <span class="link-text">confirm-order</span>
    </div>
  </div>

  <div class="crumb">
    Please confirm the information below and then
    press confirm...
  </div>

  <div class="order">
    <div class="panel">
      <form action="" method="post" id="confirmOrderForm">
        <table class="order-table">
          <tr>
            <th align="center" colspan="2">
              <font size="4"><b>Order</b></font>
              <br />
              <font size="3"><b>{{ currDateTime }}</b></font>
            </th>
          </tr>
          <tr>
            <th colspan="2">Billing Address</th>
          </tr>
          <tr>
            <td>First name:</td>
            <td>{{ firstName }}</td>
          </tr>
          <tr>
            <td>Last name:</td>
            <td>{{ lastName }}</td>
          </tr>
          <tr>
            <td>Address 1:</td>
            <td>{{ address1 }}</td>
          </tr>
          <tr>
            <td>Address 2:</td>
            <td>{{ address2 }}</td>
          </tr>
          <tr>
            <td>City:</td>
            <td>{{ city }}</td>
          </tr>
          <tr>
            <td>State:</td>
            <td>{{ state }}</td>
          </tr>
          <tr>
            <td>Zip:</td>
            <td>{{ zip }}</td>
          </tr>
          <tr>
            <td>Country:</td>
            <td>{{ country }}</td>
          </tr>
          <tr>
            <th colspan="2">Shipping Address</th>
          </tr>
          <tr>
            <td>First name:</td>
            <td>{{ firstName }}</td>
          </tr>
          <tr>
            <td>Last name:</td>
            <td>{{ lastName }}</td>
          </tr>
          <tr>
            <td>Address 1:</td>
            <td>{{ address1 }}</td>
          </tr>
          <tr>
            <td>Address 2:</td>
            <td>{{ address2 }}</td>
          </tr>
          <tr>
            <td>City:</td>
            <td>{{ city }}</td>
          </tr>
          <tr>
            <td>State:</td>
            <td>{{ state }}</td>
          </tr>
          <tr>
            <td>Zip:</td>
            <td>{{ zip }}</td>
          </tr>
          <tr>
            <td>Country:</td>
            <td>{{ country }}</td>
          </tr>

        </table>

        <table class="total-table">
          <tr>
            <th class="id">Product ID</th>
            <th class="price">Price</th>
            <th class="count">Quantity</th>
            <th class="totalPrice">Total Price</th>
          </tr>
          <tr v-for="item in cartlist" :key="item.id">
            <td class="id">{{ item.Item_Id }}</td>
            <td class="price">${{ item.Price }}</td>
            <td class="count">{{ item.Count }}</td>
            <td class="totalPrice">{{ item.Price * item.Count}}</td>
          </tr>
          <div class="button-container">
            <button @click="submitForm(totalPrice,subject,body)">Confirm</button>
          </div>
        </table>
      </form>
    </div>
  </div>

</template>

<script>
import {defineComponent} from 'vue'
import axios from 'axios';
import router from "@/router";
import Top from '@/components/common/nav-head.vue';
import Bottom from '@/components/common/bottom.vue';

export default defineComponent({
  name:"confirm-order",
  components: {
    Top,
    Bottom
  },
  mounted() {
    this.getCurrDateTime();
  },
  data() {
    return {
      cartlist: this.$store.getters['getcartList'],
      cardType: sessionStorage.getItem('cardType') || '',
      creditCardNumber: sessionStorage.getItem('creditCardNumber') || '',
      expiryDate: sessionStorage.getItem('expiryDate') || '',
      firstName: sessionStorage.getItem('firstName') || '',
      lastName: sessionStorage.getItem('lastName') || '',
      address1: sessionStorage.getItem('address1') || '',
      address2: sessionStorage.getItem('address2') || '',
      city: sessionStorage.getItem('city') || '',
      state: sessionStorage.getItem('state') || '',
      zip: sessionStorage.getItem('zip') || '',
      country: sessionStorage.getItem('country') || '',
      currentOrder: {},
      currDateTime: '',
      orderId: 1000,
      orderDate : '',
      price : '',
      count : '',
      total : '',
      states : 'submitted',
      totalCost() {
        return this.item.Price*this.item.Count;
      },
      description() {
        return this.item.Item_Id;
      },
    };
  },
  computed: {
    totalprice: {
      get () {
        let total = 0
        for (let cart of this.cartlist) {
          total += cart.Price * cart.Count
        }
        return total
      }
    }
  },
  methods: {
    viewOrder() {
      router.push('/view-order')
    },
    getCurrDateTime() {
      const currDate = new Date();
      const currTime = `${currDate.getHours()}:${currDate.getMinutes()}:${currDate.getSeconds()}`;
      const currDateTime = `${currDate.getFullYear()}-${currDate.getMonth() + 1}-${currDate.getDate()} ${currTime}`;
      this.currDateTime = currDateTime;
    },
    submit_axios(orderID, orderDate, price, count, total, states){
      const order = {
        orderID : orderID,
        orderDate : orderDate,
        price : price,
        count : count,
        total : total,
        states : states
      }
      return axios({
        url:'http://localhost:8080/orders',
        method:'POST',
        withCredentials:true,
        data:order
      })
    },
    submitForm(total,orderId,description) {
      console.log("totalCost:" + this.totalCost)
      console.log("orderTitle:" + this.orderId)
      console.log("description:" + this.description)
      this.$axios.post("http://localhost:8080/AliPay", {
        totalCost: this.totalCost,
        orderTitle: this.orderId,
        description: this.description
      }).then(function (response) {
        //订单提交
        if(response.data()) {
          const promise = this.submit_axios(this.orderID, this.orderDate, this.price, this.count, this.total, this.states)
          promise.then(
              response=>{
                if(response.data.status === 0){
                  alert('order Success')
                  router.push('/view-order')
                } else {
                  router.replace({
                    path : '/confirm-order',
                    query : {
                      error : 'order Fail'
                    }
                  })
                  location.reload()
                }
              }
          ).catch(error=>{
            console.log(error)
          })
        }
        //zfb返回
        console.log("【支付宝返回】" + response.data);
        //这里是跳转新的页面
        document.querySelector('body').innerHTML = response;
        const div = document.createElement('div');
        div.innerHTML = response.data;
        document.body.appendChild(div);

        // _blank -- 在新窗口中打开链接
        // _parent -- 在父窗体中打开链接
        // _self -- 在当前窗体打开链接,此为默认值
        // _top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
        document.forms[0].setAttribute('target', '_blank');// 新建窗口页面
        document.forms[0].submit();

      }).catch(function(error) {
        console.log(error)
      })
    },
  }
})
</script>

<style src="@/assets/OrderPage/order.css"></style>